<template>
  <div class="orderdetails" v-if="orderDetails.id">
    <!-- 头部 -->
    <NavigationBar title="订单详情"></NavigationBar>
    <div class="state">订单状态: <span>{{ orderDetails.order_status }}</span></div>
    <div class="address">
      <img class="left" src="https://files.roborock.com/images_h5/image/default_address.png" alt="">
      <div class="right">
        <p>{{ orderDetails.consignee.name }} {{ orderDetails.consignee.mobile }}</p>
        <p>{{ orderDetails.consignee.regions + " " + orderDetails.consignee.address }}</p>
      </div>
    </div>
    <div class="content" v-for="(item,index) in  orderDetails.goods" :key="index">
      <div class="item">
        <img class="left" :src="'https://files.roborock.com/uploadImages/'+item.product.default_photo" alt="">
        <div class="center">
          <p class="name">{{ item.product.name }}</p>
          <p class="price">{{ item.product.back_money }}</p>
        </div>
        <div class="right">x{{ item.total_amount }}</div>
      </div>
    </div>
    <ul>
      <li><span class="title">订单编号</span><span class="right">{{ orderDetails.sn }}</span></li>
      <li><span class="title">下单时间</span><span class="right">{{ orderDetails.created_at }}</span></li>
      <li><span class="title">发票类型</span><span class="right">{{
          orderDetails.invoice.mode === 0 ? "电子发票" : "其他发票"
        }}</span></li>
      <li><span class="title">运费</span><span class="right">{{ orderDetails.shipping.price }} 元</span></li>
      <li><span class="title">实付金额</span><span class="right">{{ orderDetails.money_paid }} 元</span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "OrderDetails",
  data() {
    return {
      orderDetails: {}
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {},
// 生命周期
  created() {
  },
  mounted() {
    this.$ajax.orderDetails({order: this.$route.params.id}).then(res => {
      if (res.error_code === 0) {
        this.orderDetails = res.order
      } else {
        this.$toast(res.error_desc)
      }
      // console.log("订单详情", this.orderDetails)
    })
  }
}
</script>

<style lang="scss" scoped>
.orderdetails {
  .state {
    padding: 20px;
    box-sizing: border-box;
    font-size: 16px;
    margin-bottom: 5px;
    width: 100%;
    color: #4a4a4a;
    line-height: 1.6;

    span {
      color: #007aff;
    }
  }

  .address {
    box-sizing: border-box;
    border-top: 0.5px solid #e4e4e4;
    border-bottom: 0.5px solid #e4e4e4;
    margin: 0 20px;
    width: calc(100% - 40px);
    padding: 18px 0;
    display: flex;

    img {
      height: 40px;
      width: 40px;
      margin-right: 20px;
    }

    .right {
      display: inline-block;
      box-sizing: border-box;
      flex: 1;
      color: #4a4a4a;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;

      p:last-child {
        font-size: 14px;
        margin-top: 5px;
        overflow: hidden;
        color: #4a4a4a;
        font-weight: 400;
        line-height: 20px;

      }
    }
  }

  .content {
    margin-top: 5px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .item {
      display: flex;
      width: 100%;
      padding: 15px 0;

      img {
        width: 75px;
        //height: 74px;
      }

      .center {
        flex: 1;
        padding-left: 20px;

        .name {
          font-size: 14px;
          color: #4a4a4a;
          line-height: 25px;
          margin-bottom: 5px;
        }

        .price {
          color: transparent;
          background-image: linear-gradient(90deg, #72b4fe, #3777f7);
          -webkit-background-clip: text;
        }
      }

      .right {
        color: #4a4a4a;
        font-size: 16px;
        line-height: 55px;
      }
    }
  }

  ul {
    border-top: 1px solid #e4e4e4;
    margin: 0 20px 20px;
    padding-top: 20px;
    box-sizing: border-box;

    li {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      color: #4a4a4a;
      margin-bottom: 15px;

      .title {
        font-size: 14px;
        color: #4a4a4a;
      }

      .right {
        font-size: 12px;
        color: #9b9b9b;
      }
    }
  }
}
</style>